<template>
  <div>
    <p>{{$t('m.bpm.design.idea_common')}}：
      <a-button @click="setMessage($t('m.bpm.design.idea_agree'))" size="small" type="link" style="margin-right: 5px;">{{$t('m.bpm.design.idea_agree')}}</a-button>
      <a-button @click="setMessage($t('m.bpm.design.idea_disagree'))" size="small" type="link" style="margin-right: 5px;">{{$t('m.bpm.design.idea_disagree')}}</a-button>
      <a-button @click="setMessage($t('m.bpm.design.idea_read'))" size="small" type="link" style="margin-right: 5px;">{{$t('m.bpm.design.idea_read')}}</a-button>
      <a-button @click="showDrawer" size="small" icon="ellipsis" type="link" style="margin-right: 5px;"></a-button>
      <a-button icon="plus" @click="handleAdd" style="float: right;margin-right:20px;">{{$t('m.bpm.design.idea_add_to_common')}}</a-button>
    </p>

    <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      @close="onClose"
      :visible="visible"
    >
      <a-spin :spinning="spinning > 0">
        <a-list :dataSource="dataSource">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a @click="setMessage(item.idea)">{{item.idea}}</a>
            <ych-icon v-if="item.type == '2'" @click="handleDel(item.id)" type="delete"/>
          </a-list-item>
        </a-list>
      </a-spin>
    </a-drawer>
  </div>
</template>

<script>

  import { postAction, getAction, deleteAction } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'BpmMessageDrawer',
    components: {},
    props: {
      message: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        title: this.$t('m.bpm.design.idea_common'),
        visible: false,
        url: {
          getMyCommonIdea: YchConstant.PREFIX_BPM + '/bpm-front/commonIdeaRest/getMyCommonIdea/v1',
          addMyCommonIdea: YchConstant.PREFIX_BPM + '/bpm-front/commonIdeaRest/addMyCommonIdea/v1',
          deleteMyCommonIdea: YchConstant.PREFIX_BPM + '/bpm-front/commonIdeaRest/deleteMyCommonIdea/v1'
        },
        spinning: 0,
        dataSource: [],
        initFlg: false
      }
    },
    methods: {
      showDrawer () {
        this.visible = true
      },
      onClose () {
        this.visible = false
      },
      setMessage (message) {
        this.$emit('setMessage', message)
        this.visible = false
      },
      refresh () {
        this.spinning++
        getAction(this.url.getMyCommonIdea, {}).then((res) => {
          if (res.success) {
            this.dataSource = [{
              id: Math.random().toString(36).slice(-8),
              idea: this.$t('m.bpm.design.idea_agree'),
              type: '1'
            }, {
              id: Math.random().toString(36).slice(-8),
              idea: this.$t('m.bpm.design.idea_disagree'),
              type: '1'
            }, {
              id: Math.random().toString(36).slice(-8),
              idea: this.$t('m.bpm.design.idea_read'),
              type: '1'
            },
              ...res.result
            ]
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
      handleAdd () {
        if (!this.message) {
          this.messageUtil.warning(this.$t('m.bpm.design.idea_not_blank_warning'))
          return
        }
        this.spinning++
        postAction(this.url.addMyCommonIdea, { idea: this.message }).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.dataSource.push({
              id: res.result,
              idea: this.message,
              type: '2'
            })
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
      handleDel (id) {
        this.spinning++
        deleteAction(this.url.deleteMyCommonIdea, { id: id }).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            const data = [...this.dataSource]
            this.dataSource = data.filter(item => item.id !== id)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      }
    },
    watch: {
      visible (val) {
        if (val && !this.initFlg) {
          this.refresh()
          this.initFlg = true
        }
      }
    }
  }
</script>
